<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="static/images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="static/images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
    <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/bootstrap-admin.min.css">
    <!--  代码高亮  -->
    <link rel="stylesheet" href="lib/prismjs/themes/prism-okaidia.css">
    <title>bootstrap-admin</title>
</head>
<body>

<!--侧边栏-->
<div class="bsa-sidebar">
    <div class="bsa-sidebar-header">
        <img src="static/images/logo-icon.png" class="bsa-logo-icon" alt="logo-icon">
        <div class="bsa-logo-text">bootstrap-admin</div>
    </div>
    <div class="bsa-sidebar-body">
        <ul class="bsa-menu">
            <li>
                <a href="index.html">
                    <i class="bi bi-house"></i>首页
                </a>
            </li>
            <li>
                <a href="javascript:" class="has-children open">
                    <i class="bi bi-columns-gap"></i>UI组件
                </a>
                <ul>
                    <li>
                        <a href="component-card.html">卡片</a>
                    </li>
                    <li>
                        <a href="component-button.html">按钮</a>
                    </li>
                    <li>
                        <a href="component-accordion.html">手风琴</a>
                    </li>
                    <li>
                        <a href="component-alert.html">警告框</a>
                    </li>
                    <li>
                        <a href="component-badge.html" class="active">徽章</a>
                    </li>
                    <li>
                        <a href="component-breadcrumb.html">面包屑</a>
                    </li>
                    <li>
                        <a href="component-table.html">表格</a>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">表单</a>
                        <ul>
                            <li><a href="component-form-elements.html">基础元素</a></li>
                            <li><a href="component-form-validations.html">表单验证</a></li>
                            <li><a href="component-form-layouts.html">表单布局</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-html"></i>页面
                </a>
                <ul>
                    <li>
                        <a href="page-profile.html">个人资料</a>
                    </li>
                    <li>
                        <a href="page-timeline.html">时间轴</a>
                    </li>
                    <li>
                        <a href="page-error.html">错误页面</a>
                    </li>
                    <li>
                        <a href="page-add.html">新增页面</a>
                    </li>
                    <li>
                        <a href="page-list.html">列表页</a>
                    </li>
                    <li>
                        <a href="page-blank.html">新页面</a>
                    </li>
                    <li>
                        <a href="page-login.html">登录页</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-js"></i>插件
                </a>
                <ul>
                    <li><a href="plugin-bootstrap-notify.html">通知插件</a></li>
                    <li><a href="plugin-bootstrap-dialog.html">弹层插件</a></li>
                    <li><a href="plugin-formvalidation.html">表单验证</a></li>
                    <li><a href="plugin-tempus-dominus.html">日期时间选择</a></li>
                    <li><a href="plugin-tinymce.html">富文本编辑器</a></li>
                    <li><a href="plugin-dropzone.html">文件上传</a></li>
                    <li><a href="plugin-croppie.html">头像裁剪</a></li>
                    <li><a href="plugin-ztree.html">树形组件</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-list-nested"></i>多级菜单
                </a>
                <ul>
                    <li><a href="javascript:">一级菜单</a></li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                            <li>
                                <a href="javascript:" class="has-children">二级菜单</a>
                                <ul>
                                    <li><a href="javascript:">三级菜单</a></li>
                                    <li>
                                        <a href="javascript:" class="has-children">三级菜单</a>
                                        <ul>
                                            <li><a href="javascript:">四级菜单</a></li>
                                            <li><a href="javascript:">四级菜单</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!--头部导航-->
<div class="bsa-header">
    <div class="bsa-header-item bsa-mobile-sidebar-item">
        <i class="bi bi-list"></i>
    </div>
    <div class="bsa-header-item bsa-search-bar-item">
        <form class="bsa-search-box" action="#">
            <input type="text" class="form-control bsa-search-input" name="keyword" aria-label="搜索关键词"
                   placeholder="搜索关键词">
            <button class="bsa-search-btn" type="submit"><i class="bi bi-search"></i></button>
            <i class="bi bi-x bsa-search-close-icon"></i>
        </form>
    </div>
    <div class="bsa-header-item bsa-mobile-search-item">
        <i class="bi bi-search"></i>
    </div>
    <div class="bsa-header-item dropdown">
        <i class="bi bi-grid" data-bs-toggle="dropdown" role="button"></i>
        <div class="dropdown-menu dropdown-menu-end bsa-dropdown-menu">
            <div class="bsa-dropdown-menu-body">
                <div class="container-fluid">
                    <div class="row row-cols-3 g-3 p-3">
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-primary text-white"><i class="bi bi-bank"></i></div>
                            <div class="fs-6 mt-1 text-muted">银行</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-info text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用2</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用3</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用4</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用5</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用6</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bsa-header-item dropdown">
        <div class="position-relative " data-bs-toggle="dropdown" role="button">
            <span class="bsa-num-count">99+</span>
            <i class="bi bi-bell"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end bsa-dropdown-menu">

            <div class="bsa-dropdown-menu-header d-flex align-items-center justify-content-between">
                <p class="bsa-dropdown-menu-title">通知列表</p>
                <a href="javascript:" class="bsa-dropdown-menu-all-read">全部设为已读</a>
            </div>

            <div class="bsa-dropdown-menu-body">
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-danger text-white"><i class="bi bi-cart"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新订单</h5>
                            <p class="bsa-media-text">您收到新的订单</p>
                            <p class="bsa-media-time small">10秒前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-success text-white"><i class="bi bi-people"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新增用户</h5>
                            <p class="bsa-media-text">100个新用户注册</p>
                            <p class="bsa-media-time small">30分钟前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-warning text-white"><i class="bi bi-chat-square-dots"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新的评论</h5>
                            <p class="bsa-media-text">您收到客户新的评论</p>
                            <p class="bsa-media-time small">2天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-primary text-white"><i class="bi bi-cart-check"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">订单已经发货</h5>
                            <p class="bsa-media-text">您的商品已在运送途中</p>
                            <p class="bsa-media-time small">3天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-secondary text-white"><i class="bi bi-person-workspace"></i>
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新的同事</h5>
                            <p class="bsa-media-text">新增3位后台管理工作成员</p>
                            <p class="bsa-media-time small">1周前</p>
                        </div>
                    </div>
                </a>
            </div>

            <div class="bsa-dropdown-menu-footer d-flex align-items-center justify-content-center">
                <a href="javascript:" class="bsa-dropdown-view-all">查看所有通知</a>
            </div>

        </div>
    </div>
    <div class="bsa-header-item dropdown">
        <div class="position-relative " data-bs-toggle="dropdown" role="button">
            <span class="bsa-num-count">9</span>
            <i class="bi bi-chat-left"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end bsa-dropdown-menu">
            <div class="bsa-dropdown-menu-header d-flex align-items-center justify-content-between">
                <p class="bsa-dropdown-menu-title">消息列表</p>
                <a href="javascript:" class="bsa-dropdown-menu-all-read">全部设为已读</a>
            </div>
            <div class="bsa-dropdown-menu-body">
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11110-50.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">青蛙王子</h5>
                            <p class="bsa-media-text">请给我开通新的角色权限~</p>
                            <p class="bsa-media-time small">16秒前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11131.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">骑着蜗牛看世界</h5>
                            <p class="bsa-media-text">兄弟，晚上一起去喝几杯</p>
                            <p class="bsa-media-time small">40分钟前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11114.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">小刘</h5>
                            <p class="bsa-media-text">订单已经发货完毕</p>
                            <p class="bsa-media-time small">7天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11126-50.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">小王</h5>
                            <p class="bsa-media-text">晚上一起去公园走走呀~</p>
                            <p class="bsa-media-time small">8天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11112-50.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">人生如茶</h5>
                            <p class="bsa-media-text">今天晚上大家留下来开个产品会议</p>
                            <p class="bsa-media-time small">2周前</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="bsa-dropdown-menu-footer d-flex align-items-center justify-content-center">
                <a href="javascript:" class="bsa-dropdown-view-all">查看所有消息</a>
            </div>
        </div>
    </div>
    <div class="bsa-header-item dropdown">
        <div class="bsa-user-info" data-bs-toggle="dropdown" role="button">
            <img src="static/images/avatar.jpg" class="bsa-user-img" alt="用户头像">
            <div class="bsa-user-detail">
                <div class="bsa-user-name">欲饮琵琶码上催</div>
                <div class="bsa-user-role">超级管理员</div>
            </div>
        </div>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-person"></i>个人资料</a></li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-gear"></i>设置</a></li>
            <li>
                <div class="dropdown-divider"></div>
            </li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-box-arrow-right"></i>退出登录</a></li>
        </ul>
    </div>
</div>


<!--内容区域-->
<div class="bsa-main-wrapper">
    <div class="bsa-main-content">

        <div class="card border-0 shadow-sm">
            <div class="container-fluid">
                <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 row-cols-lg-2 g-2">
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">基础徽章</h5>
                            <div class="dropdown-divider mb-3"></div>
                            <div class="bsa-component">
                                <div class="row row-cols-auto g-3">
                                    <div class="col">
                                        <span class="badge bg-primary">富强</span>
                                    </div>
                                    <div class="col">
                                        <span class="badge bg-secondary">文明</span>
                                    </div>
                                    <div class="col">
                                        <span class="badge bg-success">和谐</span>
                                    </div>
                                    <div class="col">
                                        <span class="badge bg-danger">自由</span>
                                    </div>
                                    <div class="col">
                                        <span class="badge bg-warning text-dark">平等</span>
                                    </div>
                                    <div class="col">
                                        <span class="badge bg-info text-dark">诚信</span>
                                    </div>
                                    <div class="col">
                                        <span class="badge bg-light text-dark">友善</span>
                                    </div>
                                    <div class="col">
                                        <span class="badge bg-dark">公正</span>
                                    </div>
                                    <div class="w-100"></div>
                                    <div class="col">
                                        <span class="badge rounded-pill bg-primary">富强</span>
                                    </div>
                                    <div class="col">
                                        <span class="badge rounded-pill bg-secondary">文明</span>
                                    </div>
                                    <div class="col">
                                        <span class="badge rounded-pill bg-success">和谐</span>
                                    </div>
                                    <div class="col">
                                        <span class="badge rounded-pill bg-danger">自由</span>
                                    </div>
                                    <div class="col">
                                        <span class="badge rounded-pill bg-warning text-dark">平等</span>
                                    </div>
                                    <div class="col">
                                        <span class="badge rounded-pill bg-info text-dark">诚信</span>
                                    </div>
                                    <div class="col">
                                        <span class="badge rounded-pill bg-light text-dark">友善</span>
                                    </div>
                                    <div class="col">
                                        <span class="badge rounded-pill bg-dark">公正</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">按钮上的徽章</h5>
                            <div class="dropdown-divider mb-3"></div>
                            <div class="bsa-component">
                                <div class="row row-cols-auto g-3">
                                    <div class="col">
                                        <button type="button" class="btn btn-primary">消息通知 <span
                                                class="badge bg-dark">4</span>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <button type="button" class="btn btn-danger">消息通知 <span
                                                class="badge bg-dark">4</span>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <button type="button" class="btn btn-success">消息通知 <span
                                                class="badge bg-dark">4</span>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <button type="button" class="btn btn-warning">消息通知 <span
                                                class="badge bg-dark">4</span>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <button type="button" class="btn btn-info">消息通知 <span class="badge bg-dark">4</span>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <button type="button" class="btn btn-dark">消息通知 <span
                                                class="badge bg-secondary">4</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">徽章定位</h5>
                            <div class="dropdown-divider mb-3"></div>
                            <div class="bsa-component">
                                <div class="row row-cols-auto gy-4">
                                    <div class="col">
                                        <button type="button" class="btn btn-dark position-relative me-lg-5">
                                            <i class="bi bi-chat-dots me-2 align-middle"></i>评论
                                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">+18</span>
                                        </button>
                                    </div>

                                    <div class="col">
                                        <button type="button" class="btn btn-primary position-relative me-lg-5"><i
                                                class="bi bi-hand-thumbs-up me-2 align-middle"></i>喜欢
                                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+22 </span>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <button type="button" class="btn btn-outline-success position-relative me-lg-5"><i
                                                class="bi bi-bell me-2 align-middle"></i> 消息通知
                                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">New </span>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <button type="button" class="btn btn-danger position-relative me-lg-5">
                                            <i class="bi bi-calendar4-event me-2 align-middle"></i>事件 <span
                                                class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-dark">4</span>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <button type="button" class="btn btn-warning position-relative me-lg-5">
                                            <i class="bi bi-heart me-2 align-middle"></i>项目
                                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-dark">8k</span>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <button type="button" class="btn btn-info position-relative me-lg-5"><i
                                                class="bi bi-people align-middle"></i> 成员 <span
                                                class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-dark">24</span>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <button type="button" class="btn btn-primary position-relative"><i
                                                class="bi bi-bell align-middle"></i> 通知 <span
                                                class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span
                                                class="visually-hidden">New alerts</span></span>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <button type="button" class="btn btn-secondary position-relative"><i class="bi bi-exclamation-triangle align-middle"></i> 警告
                                            <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span
                                                    class="visually-hidden">unread messages</span></span>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <button type="button" class="btn btn-secondary position-relative"><i
                                                class="bi bi-bell align-middle"></i><span
                                                class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span
                                                class="visually-hidden">unread messages</span></span>
                                        </button>
                                    </div>
                                    <div class="col">
                                        <div class="bsa-icon-badge position-relative bg-dark me-3"><i
                                                class="bi bi-bell align-middle bsa-font-15 text-white"></i><span
                                                class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">+18 <span
                                                class="visually-hidden">unread messages</span></span>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="bsa-icon-badge position-relative bg-primary me-3"><i
                                                class="bi bi-heart align-middle bsa-font-15 text-white"></i><span
                                                class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">+22 <span
                                                class="visually-hidden">unread messages</span></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>


        </div>

    </div>
</div>

<!--调色板-->
<div class="bsa-switcher">

    <div class="bsa-switcher-toggler-btn">
        <div class="bsa-switcher-toggler-icon">
            <i class="bi bi-gear"></i>
        </div>
    </div>


    <div class="bsa-switcher-header">
        <h5 class="bsa-switcher-header-title">自定义主题</h5>
        <button type="button" class="btn-close text-reset bsa-switcher-toggler-btn"></button>
    </div>


    <div class="bsa-switcher-body">
        <h6 class="text-dark">头部颜色</h6>
        <hr>
        <div class="bsa-headercolor-wrap">

            <div class="row row-cols-auto g-3">
                <div class="col">
                    <div class="headercolor1"></div>
                </div>
                <div class="col">
                    <div class="headercolor2"></div>
                </div>
                <div class="col">
                    <div class="headercolor3"></div>
                </div>
                <div class="col">
                    <div class="headercolor4"></div>
                </div>
                <div class="col">
                    <div class="headercolor5"></div>
                </div>
                <div class="col">
                    <div class="headercolor6"></div>
                </div>
                <div class="col">
                    <div class="headercolor7"></div>
                </div>
                <div class="col">
                    <div class="headercolor8"></div>
                </div>
            </div>
        </div>

        <h6 class="text-dark">侧边栏颜色</h6>
        <hr>
        <div class="bsa-sidebarcolor-wrap">

            <div class="row row-cols-auto g-3">
                <div class="col">
                    <div class="sidebarcolor1"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor2"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor3"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor4"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor5"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor6"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor7"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor8"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="lib/prismjs/prism.js"></script>
<script src="static/js/bootstrap.bundle.min.js"></script>
<script src="src/bootstrap-admin.js"></script>


</body>
</html>